<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Picture Scrap Page</title>
		<link rel='stylesheet' href='resources/css/asset.css' type='text/css' media='all' />
		<link rel='stylesheet' href='resources/css/style.css' type='text/css' media='all' />
		<link rel='stylesheet' href='resources/css/grid.css' type='text/css' media='all' />
		<link rel="stylesheet" media="screen" type="text/css" href="resources/css/colorpicker.css" />
		<script	src="resources/js/kinetic-v4.0.0.js"></script>
		<script src="resources/js/jquery-1.8.2.min.js"></script>
		<script src="resources/js/jquery.lightbox_me.js" charset="utf-8"></script>
		<script src="resources/js/vendor/jquery.ui.widget.js"></script>
		<script src="resources/js/jquery.iframe-transport.js"></script>
		<script src="resources/js/jquery.fileupload.js"></script>
		<script src="resources/js/colorpicker.js"></script>
		<!-- 
		<script src="resources/js/backbone.js"></script>
		<script src="resources/js/undescore-1.4.2.js"></script> 
		-->
		<script src="resources/js/scrappage1.js"></script>
	<style type="text/css">
		#upload-dialog, #resize-dialog, #save-scrap-dialog {
			background: none repeat scroll 0 0 #FFFFFF;
		    border: 1px solid #CCCCCC;
		    border-radius: 10px 10px 10px 10px;
		    height: 240px;
		    margin-bottom: 10px;
		    overflow: auto;
		    padding: 10px;
		}
		#pictureList #images img{
			max-width: 200px;
			max-height: 300px;
			
		}
	</style>
	</head>
	<body>

<!-- Content -->
<section id="wrapper">
<!-- Header -->

<header id="header">
	<div id="logo">
	<h4>Babytivities</h4> 
	</div>
	<div id="backlinks">
	<div id="search">
		<input type="text" id="searching" name="searching" placeholder="search peoples here"/>
	</div>
		<ul>
			<li><a href="home.html">Home</a></li>
			<li><a href="scrap.html">Scrap</a></li>
			<li><a href="message.html">Message</a></li>
			<li><a href="gallery.html">Gallery</a></li>
			<li><a href="profile.html">Profile</a></li>
		</ul> 
	</div>
</header>
<div class="clearfix">&nbsp;</div>

<div id="main_wrap" class="container_12">
  <div class="grid_9 alpha">
    <div id="content"style="width: 800px;">
		<div>
			<button id="picture-upload">upload</button>
			<button id="picture-trigger">pictures</button>
			<button id="background-picker">pick background</button>
			<button id="resize-trigger">resize</button>
			<button id="picture-save">save</button>
		</div>
		<div id="container"></div>
		<div id="pictureList">
			<div id="images">
			
			</div>
        	<a id="close_x" class="close sprited" href="#">close</a>
		</div>
		<div id="upload-dialog">
			<form>
				<label for="pictureUploader">Select picture</label>
				<input type="file" id="pictureUploader" 
				name="mypicture[]" data-url="services/manager/picture" multiple/>
				<a id="close_x" class="close sprited" href="#">close</a>
			</form>
			<div id="addTitleDescription">
			</div>
		</div>
		<div id="save-scrap-dialog">
			<div id="addScrapTitleDescription">
			</div>
		</div>
		<div id="resize-dialog">
				<p>
					<label for="newWidth">width</label>
					<input type="text" id="newWidth" name="newWidth"/>
				</p>
				<p>
					<label for="newHeight">height</label>
					<input type="text" id="newHeight" name="newHeight"/>
				</p>
				<a id="close_x" class="close sprited" href="#">close</a>
		</div>
	</div>
  </div>
  <div class="grid_3 omega">
       <div id="wrap_sidebar">
		<h3>Sidebar</h3>
	   </div>
  </div>
</div>

</section>

<!-- Footer -->
<footer id="footer">
	<span>&copy; 2012 <a href="#">babytivities</a></span>
</footer>

	</body>
</html>
